<!--客户对账明细-->
<template>
  <div class="detail-container">
    <!-- 筛选区域 -->
    <div class="controls-section">

      <div class="filters">
        <div class="filter-item">
          <label>对账单号</label>
          <input type="text" v-model="query.recoCode" placeholder="请输入对账单号">
        </div>
      </div>
      <div class="actions">
        <button class="btn-primary" @click="search">搜索</button>
        <button class="btn-secondary" @click="reset">重置</button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="allSelected"></th>
            <th>对账单号</th>
            <th>发生日期</th>
            <th>产品</th>
            <th>本次对账金额</th>
            <th>已收款金额</th>
            <th>待收款金额</th>
            <th>已退款金额</th>
            <th>待退款金额</th>
            <th>关联出库单</th>
            <th>关联入库单</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in details" :key="item.id">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td class="link-style">{{ item.recoCode }}</td>
            <td>{{ item.occurDate || '-' }}</td>
            <td class="link-style">{{ item.productDisplay || '-' }}</td>
            <td>{{ formatMoney(item.amount) }}</td>
            <td>{{ formatMoney(item.receivedAmount) }}</td>
            <td>{{ formatMoney(item.toReceiveAmount) }}</td>
            <td>{{ formatMoney(item.refundedAmount) }}</td>
            <td>{{ formatMoney(item.toRefundAmount) }}</td>
            <td>{{ item.outboundOrderNo || '-' }}</td>
            <td>{{ item.receiptOrderNo || '-' }}</td>
            <td>{{ item.remark || '-' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部区域 -->
    <div class="footer-section">
      <div class="footer-left">
        <input type="checkbox" v-model="allSelected">
        <label>全选</label>
        <button class="btn-secondary">导出</button>
      </div>
      <div class="pagination">
        <button @click="prevPage" :disabled="query.pageNum <= 1">&lt;</button>
        <button
          v-for="page in pageNumbers"
          :key="page"
          :class="{ active: page === query.pageNum }"
          @click="goToPage(page)"
        >
          {{ page }}
        </button>
        <button @click="nextPage" :disabled="query.pageNum >= totalPages">&gt;</button>
        <select v-model="query.pageSize" @change="onPageSizeChange">
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
import { detailPage } from '@/api/finance/reconciliationDetail'
export default {
  name: 'CustomerReconciliationDetail',
  data() {
    return {
      details: [],
      query:{ pageNum:1, pageSize:10, recoCode:'' },
      total: 0,
      totalPages: 0
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.details.length > 0 && this.details.every(item => item.selected);
      },
      set(value) {
        this.details.forEach(item => {
          item.selected = value;
        });
      }
    },
    pageNumbers() {
      const pages = [];
      const start = Math.max(1, this.query.pageNum - 2);
      const end = Math.min(this.totalPages, this.query.pageNum + 2);
      for (let i = start; i <= end; i++) pages.push(i);
      return pages;
    }
  },
  mounted(){
    // 若路由带入recoCode，作为筛选条件加载
    const code = this.$route?.query?.recoCode
    if (code) this.query.recoCode = code
    this.load()
  },
  methods:{
    async load(){
      const { data } = await detailPage(this.query)
      const pageData = data?.data
      const rows = pageData?.records || []
      this.details = rows.map(x=>({
        ...x,
        // UI辅助字段
        selected:false,
        occurDate: x.occurDate || x.createTime || '' ,
        refundedAmount: x.refundedAmount || 0,
        toRefundAmount: x.toRefundAmount || 0,
        remark: x.remark || ''
      }))
      this.total = pageData?.total || 0
      this.totalPages = pageData?.pages || 0
    },
    search(){
      this.query.pageNum = 1
      this.load()
    },
    reset(){
      this.query = { pageNum:1, pageSize:10, recoCode:'' }
      this.load()
    },
    prevPage(){
      if(this.query.pageNum>1){ this.query.pageNum--; this.load() }
    },
    nextPage(){
      if(this.query.pageNum < this.totalPages){ this.query.pageNum++; this.load() }
    },
    goToPage(page){ this.query.pageNum = page; this.load() },
    onPageSizeChange(){ this.query.pageNum = 1; this.load() },
    formatMoney(val){ if(val==null||val==='') return '0.00'; return parseFloat(val).toFixed(2) }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.controls-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
}

.btn-new {
    background-color: #409eff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
  white-space: nowrap;
}

.filter-item input, .filter-item select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 180px;
}

.actions {
  margin-left: auto;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f8f9fa;
}

.link-style {
    color: #409eff;
    cursor: pointer;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>
